<template>
    <div class="slaughter-enterprise-info">
        <!-- 屠宰信息区域 -->
        <div class="section">
            <div class="section-header">
                <span>屠宰信息</span>
                <el-button type="text" class="setting-btn" @click="Adds">设置</el-button>
                <el-badge :value="1" class="badge" />
            </div>
            <div class="info-item">
                <span class="label">批次：</span>
                <span>{{ datas?.productuin }}</span>
            </div>
            <div class="info-item">
                <span class="label">到厂时间：</span>
                <span>{{ datas?.factoryTime }}</span>
            </div>
            <div class="info-item">
                <span class="label">到厂均重：</span>
                <span> {{ datas?.weigth }}</span>
            </div>
            <div class="info-item">
                <span class="label">屠宰时间：</span>
                <span>{{ datas?.slaughterTime }}</span>
            </div>
        </div>

        <!-- 相关资质区域 -->
        <div class="section">
            <div class="section-header">
                <span>相关资质</span>
            </div>
            <el-upload v-model:file-list="qualificationFileList" action="http://localhost:27167/api/Shops/ProduQueryImg"
                list-type="picture-card" :on-remove="handleRemove" @change="handleChange">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-badge :value="2" class="badge badge-upload" />
        </div>

        <!-- 企业信息区域 -->
        <div class="section">
            <div class="section-header">
                <span>企业信息</span>
                <el-button type="text" class="setting-btn" @click="CreateBoss">设置</el-button>
                <el-badge :value="3" class="badge" />
            </div>
            <div class="info-item">
                <span class="label">公司名称：</span>
                <span>{{ model.datam?.bossName }}</span>
            </div>
            <div class="info-item">
                <span class="label">成立时间：</span>
                <span>{{ model.datam?.createTime }}</span>
            </div>
            <div class="info-item">
                <span class="label">公司地址：</span>
                <span>{{ model.datam?.province }} {{ model.datam?.city }} {{ model.datam?.county }}</span>
            </div>
        </div>

        <!-- 企业照片区域 -->
        <div class="section">
            <div class="section-header">
                <span>企业照片</span>
            </div>
            <el-upload v-model:file-list="photoFileList" action="http://localhost:27167/api/Shops/ProduQueryImg"
                list-type="picture-card" :on-remove="handleRemove" @change="handleChanges">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-badge :value="4" class="badge badge-upload" />
        </div>
    </div>
    <el-dialog v-model="dialogFormVisible" title="屠宰新增" width="500">
        <el-form>
            <el-form-item label="到厂均重">
                <el-input v-model="dataps.weigth" />
            </el-form-item>
            <el-form-item label="到厂时间">
                <el-date-picker v-model="dataps.factoryTime" type="date" />
            </el-form-item>
            <el-form-item label="屠宰时间">
                <el-date-picker v-model="dataps.slaughterTime" type="date" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
                <el-button type="primary" @click="slanuterCreate">
                    新增
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisiblea" title="屠宰企业新增" width="500">
        <el-form>
            <el-form-item label="公司名称">
                <el-input v-model="model.datas.bossName" />
            </el-form-item>
            <el-form-item label="公司地址">
                <el-select placeholder="请选择" v-model="model.datas.province" style="width: 100px;" @change="GetBosss">
                    <el-option v-for="item in Boss" :label="item.sname" :value="item.sid" />

                </el-select>
                &nbsp;&nbsp;&nbsp;
                <el-select placeholder="请选择" v-model="model.datas.city" style="width: 100px;" @change="GetBossss">
                    <el-option v-for="item in Bosss" :label="item.sname" :value="item.sid" />

                </el-select>
                &nbsp;&nbsp;
                <el-select placeholder="请选择" v-model="model.datas.county" style="width: 100px;">
                    <el-option v-for="item in Bossss" :label="item.sname" :value="item.sid" />

                </el-select>
            </el-form-item>
            <el-form-item label="成立时间">
                <el-date-picker v-model="model.datas.createTime" type="date" :size="size" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
                <el-button type="primary" @click="SlantCreate">
                    新增
                </el-button>
            </div>
        </template>
    </el-dialog>





</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ElUpload, ElBadge, ElButton, ElIcon, ElMessage } from 'element-plus'
import { type UploadProps, type UploadUserFile } from 'element-plus'
import { ref, onMounted, watch } from 'vue'
import { Traceab } from '@/Http/http'
import { useRoute } from 'vue-router'
const route = useRoute();
// 相关资质文件列表（模拟）
const qualificationFileList = ref<UploadUserFile[]>([

])
const Getimgss = () => {
    Traceab.get("/api/Shops/ImgQuery", {
        params: {
            name: "相关资质",
            Productuins: route.query.productuin
        }
    }).then(res => {
        console.log(res.data.data.length)
        if (res.data.data.length > 0) {
            for (let i = 0; i <= res.data.data.length; i++) {
                qualificationFileList.value.push({
                    uid: 0,
                    name: "",
                    url: "",
                })
                i++;
            }


        }
        res.data.data.forEach((c: any, index: number) => {
            qualificationFileList.value[index].url = c.imgUrl
        });

        console.log(res.data.data)
    })
}

// 企业照片文件列表（模拟）
const photoFileList = ref<UploadUserFile[]>([

])
const Getimgs = () => {
    Traceab.get("/api/Shops/ImgQuery", {
        params: {
            name: "企业图片",
            Productuins: route.query.productuin
        }
    }).then(res => {
        if (res.data.data.length > 0) {
            for (let i = 0; i <= res.data.data.length; i++) {
                photoFileList.value.push({
                    uid: 0,
                    name: "",
                    url: "",
                })
                i++;
            }


        }
        res.data.data.forEach((c: any, index: number) => {
            photoFileList.value[index].url = c.imgUrl
        });

        console.log(res.data.data)
    })
}

// 预览回调（可扩展：打开新窗口/弹层展示大图等）
const handlePreview = (file: any) => {
    console.log('预览文件：', file)
    // 示例：window.open(file.url)
    window.open(file.url)

}

// 删除回调（可扩展：调用接口删除文件等）
const handleRemove = (file: any, fileList: any) => {
    console.log('删除文件：', file, '当前列表：', fileList)
}

const dialogFormVisible = ref(false)
const Adds = () => {
    dialogFormVisible.value = true
}
const dataps = ref<any>({})
const slanuterCreate = () => {
    dataps.value.productuin = route.query.productuin
    Traceab.post("/api/Shops/SlantureCreate", { data: dataps.value }).then(res => {
        if (res.data.code == 100) {
            ElMessage.success("新增成功")
            dialogFormVisible.value = false
            GetSlantrun()
        }
        else {
            ElMessage.error("新增失败")
        }
    })
}
const datas = ref<any>({})
const GetSlantrun = () => {
    Traceab.get("/api/Shops/SlantureQuery", {
        params: {
            Productuins: route.query.productuin
        }
    }).then(res => {
        datas.value = res.data.data;
    })
}

const dialogFormVisiblea = ref(false)
const CreateBoss = () => {
    dialogFormVisiblea.value = true
}
const model = ref<any>({
    id: 0,
    datas: {
        "slanghtId": 0,
        "bossName": "string",
        "province": "",
        "city": "",
        "county": "",
        "createTime": "2025-08-25T06:11:29.960Z",
        "productuins": "string"
    },
    datam: {
        "slanghtId": 0,
        "bossName": "string",
        "province": "",
        "city": "",
        "county": "",
        "createTime": "2025-08-25T06:11:29.960Z",
        "productuins": "string"
    }
})
const Boss = ref([])
const GetBoss = () => {
    Traceab.get("/api/Shops/SlantBossQuery", {
        params: {
            Id: 0
        }
    }).then(res => {
        Boss.value = res.data.data;
    })
}


const Bosss = ref<any>([])
const GetBosss = () => {
    Traceab.get("/api/Shops/SlantBossQuery", {
        params: {//
            Id: model.value.datas.province
        }
    }).then(res => {
        Bosss.value = res.data.data;
    })
}
const Bossss = ref<any>([])
const GetBossss = () => {
    Traceab.get("/api/Shops/SlantBossQuery", {
        params: {//
            Id: model.value.datas.city
        }
    }).then(res => {
        Bossss.value = res.data.data;
    })
}

const SlantCreate = () => {
    model.value.datas.productuins = route.query.productuin
    Traceab.post("/api/Shops/BossCreate", { data: model.value.datas }).then(res => {
        if (res.data.code == 100) {
            ElMessage.success("新增屠宰企业信息成功")
        }
        else {
            ElMessage.error("新增屠宰企业信息失败")
        }
    })
}

const BossGet = () => {
    Traceab.get("/api/Shops/BossQuery", {
        params: {
            Productuins: route.query.productuin
        }
    }).then(res => {
        model.value.datam = res.data.data;
    })
}

const datapsf = ref({
    "imgId": 0,
    "name": "相关资质",
    "imgUrl": "",
    "productuins": ""
})


const handleChange: UploadProps['onChange'] = (uploadFile) => {
    debugger
    let a = ""
    let con = 0;
    // 获取新添加图片的地址
    if (uploadFile.status === 'success' && uploadFile.response) {
        // 本地文件的临时地址
        const localUrl = <any>(uploadFile.response)
        console.log('本地临时地址:', localUrl)
        a = localUrl
        datapsf.value.imgUrl = a.substring(5)
        datapsf.value.productuins = route.query.productuin
        Traceab.post("/api/Shops/ImgInforCreate", {
            data: datapsf.value
        }).then(res => {
            if (res.data.code == 100) {
                ElMessage.success("上传图片成功")

            }
            else {
                ElMessage.error("上传图片失败")
            }
        })
    }
}
const datapsfs = ref({
    "imgId": 0,
    "name": "企业图片",
    "imgUrl": "",
    "productuins": ""
})


const handleChanges: UploadProps['onChange'] = (uploadFile) => {
    debugger
    let a = ""
    let con = 0;
    // 获取新添加图片的地址
    if (uploadFile.status === 'success' && uploadFile.response) {
        // 本地文件的临时地址
        const localUrl = <any>(uploadFile.response)
        console.log('本地临时地址:', localUrl)
        a = localUrl
        datapsfs.value.imgUrl = a.substring(5)
        datapsfs.value.productuins = route.query.productuin
        Traceab.post("/api/Shops/ImgInforCreate", {
            data: datapsfs.value
        }).then(res => {
            if (res.data.code == 100) {
                ElMessage.success("上传图片成功")

            }
            else {
                ElMessage.error("上传图片失败")
            }
        })
    }
}

onMounted(() => {
    GetSlantrun();
    GetBoss();
    BossGet();
    Getimgs();
    Getimgss();
})
</script>

<style scoped>
.slaughter-enterprise-info {
    width: 80%;

    font-size: 14px;
    color: #333;
}

.section {
    margin-bottom: 24px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 16px;
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.section-header span {
    font-weight: 500;
    font-size: 16px;
}

.setting-btn {
    margin-left: 8px;
    color: #409eff;
    cursor: pointer;
}

.badge {
    margin-left: 4px;
}

.badge-upload {
    position: relative;
    left: -24px;
    top: -16px;
}

.info-item {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
}

.label {
    width: 80px;
    text-align: right;
    margin-right: 8px;
    color: #666;
}

.company-intro {
    margin: 0;
    line-height: 1.6;
}

.upload-demo {
    margin-top: 8px;
}

.el-icon--upload {
    font-size: 28px;
    color: #c0c4cc;
}
</style>